<template>
  <div class="wapper">
    <h3>打卡范围设置</h3>
    <!-- //##地图 -->
    <div>
      <div id="container"></div>
    </div>
    <div class="shezhi">
      <div class="list">
        <div
          @click="active = index"
          :class="active == index ? 'item active' : 'item'"
          v-for="(k, index) in list"
          :key="k.id"
        >
          {{ k.name }}
        </div>
      </div>
      <div class="right">
        <div class="slider-demo-block">
            <span class="demonstration">打卡范围</span>
            <el-slider v-model="value" :min="100" :max="500" @input="setRadius"/>
        </div>
        <div class="btn">
            <el-button @click="router.go(-1)">取消</el-button>
             <el-button type="primary" @click="setRadiusAll">进行更改</el-button>
        </div>
      </div>
    </div>
  </div>

</template>

<script setup>
import { onMounted, onUnmounted, ref, watchEffect, watch } from "vue";
import { useRouter } from "vue-router";
let router = useRouter();
import AMapLoader from "@amap/amap-jsapi-loader";
import axios from "@/utils/request";


let map = ref(null); //地图
let circle = null; //圆
let marker = null; //标记
let list = ref([]);
let active = ref(0);
let value = ref(0);
let AMapRef = ref(null)
// ####################################################################################################
// ##确定更改设置
function setRadiusAll(){
    axios.put('/company/list',{
        list:list.value
    }).then(res=>{
        console.log(res);
        if(res.success){
            ElMessage.success(res.message)
            router.go(-1)
        }else{  
            ElMessage.error(res.message)
        }
    })
}



// ##设置半径
function setRadius(e){
    // console.log(e);
    if(list.value.length==0) return
    list.value[active.value].radius = e
    setAMap(AMapRef.value)
    
}

//## 获取地图实例
function getMap() {
  //传入圆心点坐标
  window._AMapSecurityConfig = {
    securityJsCode: "376b1997c11d76e5dc1ea9d403ad4fc4",
  };
  AMapLoader.load({
    key: "376b1997c11d76e5dc1ea9d403ad4fc4", // 申请好的Web端开发者Key，首次调用 load 时必填
    version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: ["AMap.Scale"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
  })
    .then((AMap) => {
        AMapRef.value = AMap
        setAMap(AMap);  //?传入地图实例和设置的数组还有圆心点(每次只需要重新设置位置就行，不用每次发送请求)
    })
    .catch((e) => {
      console.log(e);
    });
}

// ##设置地图
function setAMap(AMap){
    // ?设置地图中心
    map.value = new AMap.Map("container", {
        zoom: 16, //地图级别
        center: list.value[active.value].point, //地图中心点,选中哪个就使用哪个作为圆心
        // mapStyle: "amap://styles/whitesmoke", //设置地图的显示样式
        viewMode: "3D", //设置地图模式
      });
       //?获取标记（公司地点和打卡范围设置）
        // ##获取点标记和范围
      let markerList = []; //用来存储标记
        let circleList = []; //用来存储范围 
        list.value.forEach((k) => {
            // ##点标记
            let marker = new AMap.Marker({
            position: new AMap.LngLat(...k.point), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
            title: k.name + "打卡范围" + k.readius + "米",
            });
            markerList.push(marker);
            // ##圆形范围
            // console.log(k.radius);
            let circle = new AMap.Circle({
            center: k.point, //圆心
            radius: k.radius, //半径
            strokeColor: "white", //轮廓线颜色
            strokeWeight: 2, //轮廓线宽度
            strokeOpacity: 0.5, //轮廓线透明度
            fillColor: "rgba(0,0,255,1)", //多边形填充颜色
            fillOpacity: 0.3, //多边形填充透明度
            zIndex: 10, //多边形覆盖物的叠加顺序
            cursor: "pointer", //鼠标悬停时的鼠标样式
            });
            // circleList.push(circleMarker)
            circleList.push(circle);
            // ##纯文本标记
            var text = new AMap.Text({
                  position: k.point, //点标记在地图上显示的位置
                    text: '打卡范围半径'+k.radius+'米', //标记显示的文本内容
                    anchor: "top-center", //设置文本标记锚点位置
                    // draggable: true, //是否可拖拽
                    cursor: "pointer", //指定鼠标悬停时的鼠标样式。
                    // angle: 10, //点标记的旋转角度
                    style: {
                        //设置文本样式，Object 同 css 样式表
                        "margin-bottom": "1rem",
                        "border-radius": ".25rem",
                        "border-width": 0,
                        "text-align": "center",
                        "font-size": "20px",
                        "color": "blue",
                    },
                    });
            map.value.add(text); //也可以进行循环单个添加
        });

        // 创建原型和半径
        //创建圆形点标记 CircleMarker 
        map.value.add(circleList); //通过数组的方式添加多个覆盖物
        map.value.add(markerList); //通过数组的方式添加多个标记点
        
}

function setValue(){  //设置滑块的值
        value.value = list.value[active.value].radius
}


//## 获取公司列表
function getCompanyList(AMap) {
  axios.get("/company/list").then((res) => {
    // console.log(res);
    if (res.success) {
      list.value = res.data;
      setAMap(AMapRef.value); //?设置地图实例并创建地图的各种标记点
     setValue()  //设置滑块的值
    }
  });
}


onMounted(() => {
  getCompanyList(); //?获取公司列表
  getMap() //?获取地图实例
});
watch(active, () => {
    setAMap(AMapRef.value); //?重新设置地图
    setValue()
});

onUnmounted(() => {
  map.value?.destroy(); // 在卸载的时候销毁地图容器
//   map.value是地图的实例
// AMapRef.value是地图的显示容器
});
</script>

<style lang="scss" scoped>
.wapper {
  width: 100%;
  background-color: #fff;
  box-sizing: border-box;
}
#container {
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 500px;
}
.shezhi {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    align-items: center;
  .list {
    height: 350px;
    overflow: auto;
    width: 220px;
    border: 1px solid #ccc;
    .item {
      height: 40px;
      text-align: center;
      line-height: 40px;
      cursor: pointer;
    }
    .item:hover {
      background-color: rgb(80, 134, 228);
      color: #ffffff;
    }
    .active {
      background-color: rgb(0, 88, 245);
      color: #ffffff;
    }
  }
  .right{
    width: 60%;
    height: 350px;
  }
}
</style>
